<template>
    <div class="login_all flex-center">
      <div>
        <el-card>
          <el-form :model="userData" status-icon label-width="80px" >
            <el-form-item label="用户名">
              <el-input type="text" size="small" v-model="userData.account"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="password" size="small" v-model="userData.password" ></el-input>
            </el-form-item>
            <el-form-item>
              <el-row>
                <el-col :span="14">
                  <el-checkbox v-model="bearPwd">记住密码</el-checkbox>
                </el-col>
                <el-col :span="10">
                  <el-link :underline="false" @click="forgetPwd" type="primary">忘记密码?</el-link>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </el-card>
        <div class="flex-center">
          <!--<button class="button_mini">重置</button>-->
          <button class="login_button success" @click="userLogin">登录</button>
        </div>
      </div>
    </div>
</template>

<script>
    import HttpRequest from "../../http/HttpRequest";
    import api from "../../http/api/api";
    import base64 from "../../utils/base64";
    import {strongAlert} from "../../utils/dialog";

    export default {
      name: "login",
      data(){
        return{
          bearPwd:false,
          userData:{
            account:'',
            password:'',
          }
        }
      },
      methods:{
         userLogin(){
           let that = this;
          HttpRequest.HttpPost(api.userLogin,this.userData).then(res=>{
            if(res){
              let token = base64.encode(res.account+','+res.password);
              that.$store.dispatch("setToken",token);
              that.$store.dispatch("setUserInfo",res);
              if(this.bearPwd){//记住密码
                let token = this.$store.getters.token;
                let str = base64.decode(token);
                let userArr = str.split(",");
                this.userData.account = userArr[0];
                this.userData.password = userArr[1];
              }
              that.$router.push({path:'/'});
            }
          })
        },
        forgetPwd(){
          strongAlert('忘记密码请联系：</br>175*****160');
        },
      },
    }
</script>

<style lang="scss" scoped>
  @import "src/assets/css/index";
  @import "src/assets/css/el_inlay";
  .login_all{
    height: 100%;
    width:100%;
    background-image: url("../../assets/images/image/login_bg.jpg");
    background-size:100% 100%;
    >{
      div >{
        .el-card{
          opacity: 0.8;
          height:200px;
          width:350px;
        }
      }
    }
  }
</style>
